<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/biaodan.css"/>
	</head>
	<body>
		<div id="box">
			<div id="redLine"></div>
			<div id="nav">
				<p>收货信息</p>
				<p>×</p>
			</div>
			<div id="content">
				<div id="cooKie">
					<div class="kong"></div>
					<div class="cookies">
						<div class="fang"></div>
						<p class="name">洋葱</p>
						<p class="area">北京市海淀区北四环彩和坊路6号 朔黄发展大厦8号</p>
					</div>
					<div class="cookies">
						<div class="fang"></div>
						<p class="name">大蒜</p>
						<p class="area">北京市海淀区北四环西路 理想国际大厦</p>
					</div>
				</div>
				<div id="adress">
					<p>+</p>
					<p>新增收货地址</p>
				</div>
				<form action="" method="post">
					<span class="xingming">姓名 : </span><input type="text" name="" id="name1" value="" />
					<br />
					<span>地区 : </span><input type="text" name="" id="areaOne" value="" />
					<input type="text" name="name" id="areaTwo" value=""/>
					<br />
					<span>地址 : </span><input type="text" name="" id="adre" value="" />
					<br />
					<span>邮件 : </span><input type="text" name="" id="e-mail" value="" />
					<br />
					<span>手机 : </span><input type="text" name="" id="phone" value="" />
					<br />
					<div id="moren">
						<div id="xiaofang"></div>
						<p>设为默认地址</p>
					</div>
				</form>
			</div>
			<div id="bottom">
				<div id="next" class="xia">下一步</div>
				<div id="quxiao" class="qu">取消</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var inputs = document.getElementsByTagName("input");
		var next = document.getElementsByClassName("xia")[0];
		var cookie = "name=翟少川;areaOne=河北省;areatwo=石家庄市;adress=大河镇;eMail=957992911@qq.com;phone=15613315631";
		var arr = cookie.split(";");
		function haha(name){
			for(var i = 0;i < arr.length;i++){
				var arr1 = arr[i].split("=");
				if(name == arr1[0]){
					return arr1[1];
				}
			}
		}
		inputs[0].value = haha("name");
		inputs[1].value = haha("areaOne");
		inputs[2].value = haha("areatwo");
		inputs[3].value = haha("adress");
		inputs[4].value = haha("eMail");
		inputs[5].value = haha("phone");
		//识别汉字；
		var re = /^[\u4e00-\u9fa5]{2,}$/;
		//识别邮件
		var re1 = /^\w+@[a-z0-9]+((\.[a-z]{2,3})|(\.[a-z]{2,3})(\.[a-z]{2}))/;
		//识别手机号
		var re2 = /^1[3-8]\d{9}$/;
		
		next.onclick = function(){
			for(var i = 0;i < 4;i++){
				if(re.test(inputs[i].value)){
					inputs[i].style.borderColor = "";
					continue;
				}else{
					inputs[i].style.borderColor = "red";
				}
			}
			if(re1.test(inputs[4].value)){
				inputs[4].style.borderColor = "";
			}else{
				inputs[4].style.borderColor = "red";
			}
			if (re2.test(inputs[5].value)) {
				inputs[5].style.borderColor = "";
			} else{
				inputs[5].style.borderColor = "red";
			}
		}
		
		
	</script>
</html>